<!--
 * @Author: wangjian
 * 656876071@qq.com
 * @Date: 2024-07-12 16:26:13
 * @LastEditTime: 2024-08-02 14:23:06
 * @FilePath: src/views/demo/FormalTable.vue
 * @Description: 
 -->
<script setup lang="ts">
import {ref, reactive, h} from 'vue'
import {SearchOutlined, CiCircleFilled} from '@ant-design/icons-vue'
const query = ()=>{
  
}
const form = reactive({
  realName: ''
})
const sexOptions = [
  {
    label: '男',
    value: 1
  },
  {
    label: '女',
    value: 2
  }
]
/**
 * 翻译性别
 * @param val
 */
const transSex = (val: number) => {
  for (let sexOption of sexOptions) {
    if (sexOption.value === val) {
      return sexOption.label
    }
  }
}

const tableCol =
    [
      {
        title: '姓名',
        dataIndex: 'realName',
      },
      {
        title: '年龄',
        dataIndex: 'age',
      },
      {
        title: '性别',
        dataIndex: 'sex',
      }
    ]

const dataSource = ref([
  {
    realName: '张三',
    age: 18,
    sex: 1
  },
  {
    realName: '李四',
    age: 19,
    sex: 2
  }
])
</script>
<template>
  <a-form layout="inline" class="query-form">
    <a-form-item label="姓名">
      <a-input placeholder="请输入姓名" allow-clear v-model:value="form.realName"/>
    </a-form-item>
    <a-form-item label="年龄">
      <a-input placeholder="请输入年龄" allow-clear v-model:value="form.age"/>
    </a-form-item>
    <a-form-item label="性别">
      <a-select placeholder="请选择性别" allow-clear v-model:value="form.sex" :options="sexOptions" style="width: 8rem">
      </a-select>
    </a-form-item>
    <a-form-item>
      <a-button type="default" @click="query" :icon="h(SearchOutlined)">查询</a-button>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" style="background-color: orange" @click="query" :icon="h(CiCircleFilled)">重置</a-button>
    </a-form-item>
  </a-form>
  <a-table class="table-container" bordered
           :data-source="dataSource"
           :columns="tableCol"
           :title="() => '人员信息'"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'sex'">
        <span>{{ transSex(record.sex) }}</span>
      </template>
    </template>
  </a-table>
</template>

<style scoped>
.query-form {
  margin: 1rem;
}


</style>